<template>
	<div>
		<jk-operation-card class="margin-bottom-10 margin-top-10 width-100-percent fixed-operation-bar">
			<div class="flex-between-center">
				<div class="flex-start-center">
					<span class="el-icon-star-off item-gap"></span>
					<span>{{ ruleForm.code }}</span>
					<el-tag v-show="ruleForm.id" size="mini" type="info" class="margin-left-10">
						<jk-state-bar :state="ruleForm.auditState" :state-list="reportStateList"></jk-state-bar>
					</el-tag>
				</div>
				<div class="flex-start-center">
					<el-button type="info" plain icon="el-icon-back" size="small" class="item-gap" @click="onJumpList">返回列表</el-button>
					<jk-button v-if="pageType !== 'detail'" icon="el-icon-finished" :loading="saveBtnLoading" type="primary" @click="onConfirmBtn">保存</jk-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card v-loading="showLoading">
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" :hide-required-asterisk="pageType === 'detail'" label-width="130px" :show-message="false">
				<div ref="box3">
					<div class="margin-bottom-4 flex-between-center">
						<div>
							<el-tag type="primary" effect="plain">
								<span class="el-icon-tickets item-gap"></span>
								<span>基本信息</span>
							</el-tag>
						</div>
						<el-popover trigger="click" title="版本明细" width="600">
							<el-row v-if="historyData.length" :gutter="4" class="margin-bottom-4">
								<el-col :span="12">
									<el-button size="mini" class="width-100-percent margin-bottom-4">
										<div class="flex-between-center width-100-percent">
											<div class="width-100-percent flex-start-center">
												<span>创建：</span>
												<span style="font-weight: 700;">{{ historyData[0].creatorName }}</span>
											</div>
											<span class="width-100-percent flex-end-center">{{ historyData[0].createTime }}</span>
										</div>
									</el-button>
								</el-col>
								<el-col :span="12">
									<el-button size="mini" class="width-100-percent margin-bottom-4">
										<div class="flex-between-center width-100-percent">
											<div class="width-100-percent flex-start-center">
												<span>最近：</span>
												<span style="font-weight: 700;">{{ historyData[historyData.length - 1].updaterName }}</span>
											</div>
											<span class="width-100-percent flex-end-center">{{ historyData[historyData.length - 1].updateTime }}</span>
										</div>
									</el-button>
								</el-col>
							</el-row>
							<jk-table :data="historyData" size="mini" :height="200">
								<vxe-column width="80" field="version" title="版本号">
									<template slot-scope="scope">{{ scope.row.version }}.0</template>
								</vxe-column>
								<vxe-column :min-width="120" field="updaterName" title="修改人"></vxe-column>
								<vxe-column :min-width="160" field="updateTime" title="修改时间"></vxe-column>
								<vxe-column width="80" align="center" field="version" title="操作">
									<template slot-scope="scope">
										<div style="cursor: pointer;color: #2d8cf0;" @click="onSeeHistory(scope.row)">查看</div>
									</template>
								</vxe-column>
							</jk-table>
							<el-button v-show="ruleForm.id" slot="reference" size="mini">
								<span>当前版本：{{ ruleForm.version || 0 }}.0，版本记录：</span>
								<span style="font-weight: 700; font-size: 13px;">{{ ruleForm.historyCount || 0 }}</span>
								<span> 个</span>
							</el-button>
						</el-popover>
					</div>
					<jk-card ref="box1">
						<el-row class="flex-start-center-wrap">
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="区域" prop="workshopId">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.workshopName }}</span>
									<el-select v-else v-model="ruleForm.workshopId" :disabled="!!ruleForm.id" placeholder="所属区域" class="width-100-percent" @change="onWorkshopChange">
										<el-option
											v-for="item in workshopList"
											:key="item.id"
											:label="item.name"
											:value="item.id"
										></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="工序">
									<span class="read-only-2">{{ ruleForm.processName }}</span>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="报工日期" prop="belongDate">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.belongDate }}</span>
									<el-date-picker
										v-else
										v-model="ruleForm.belongDate"
										:disabled="!!ruleForm.id"
										type="date"
										style="width: 100%;"
										placeholder="报工日期"
										value-format="yyyy-MM-dd"
										@change="onDateChange"
									></el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="报工班次" prop="scheduleShiftId">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.shiftName }}</span>
									<el-select v-else v-model="ruleForm.scheduleShiftId" :disabled="!!ruleForm.id" clearable placeholder="报工班次" class="width-100-percent" @change="onScheduleShiftChange">
										<el-option
											v-for="item in scheduleShiftList"
											:key="item.id"
											:label="`${item.shiftName} (${item.beginTime} ~ ${item.endTime})`"
											:value="item.id"
										></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="报工类型">
									<span class="read-only-2">{{ !ruleForm.generateType ? '自动' : '手动' }}</span>
								</el-form-item>
							</el-col>
							<el-col :span="24">
								<el-form-item class="margin-bottom-0" label="备注">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.remark }}</span>
									<el-input v-else v-model="ruleForm.remark" :disabled="!!ruleForm.id" type="textarea" :rows="1"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</jk-card>
				</div>
				<div class="flex-between-center margin-bottom-4 margin-top-10">
					<div>
						<el-button v-if="pageType !== 'detail'" :disabled="!ruleForm.belongDate || !ruleForm.workshopId || !ruleForm.scheduleShiftId || !ruleForm.processId" :loading="tableLoading" type="primary" size="mini" icon="el-icon-refresh" @click="getOpenMachineListRequest">更新数据</el-button>
						<el-tag v-if="pageType === 'detail'" type="primary" effect="plain">
							<span class="el-icon-box item-gap"></span>
							<span>机台明细</span>
						</el-tag>
					</div>
					<div class="flex-end-center">
						<div class="item-gap">
							<el-button size="mini">
								<span>机台数：</span>
								<span style="font-weight: 700; font-size: 13px;">{{ ruleForm.prdReportMachineList ? ruleForm.prdReportMachineList.length : 0 }}</span>
								<span> 台</span>
							</el-button>
						</div>
						<!--<el-button size="mini" class="item-gap">
							<span>当班总能耗：</span>
							<span style="font-weight: 700; font-size: 13px;">{{ ruleForm.shiftElectricEnergy || 0 }}</span>
						</el-button>
						<div class="item-gap">
							<el-button size="mini">
								<span>当班总产量(M)：</span>
								<span style="font-weight: 700; font-size: 13px;">{{ ruleForm.shiftOutput || 0 }}</span>
							</el-button>
						</div>-->
						<el-button size="mini">
							<span>当班总产量(kg)：</span>
							<span style="font-weight: 700; font-size: 13px;">{{ ruleForm.shiftQty || 0 }}</span>
						</el-button>
					</div>
				</div>
				<jk-table
					ref="jkTable"
					border
					:data="ruleForm.prdReportMachineList"
					:loading="tableLoading"
					:show-footer="true"
					:footer-method="footerMethod"
					:height="660"
					:span-method="mergeColMethod"
					:row-style="rowClassName"
				>
					<vxe-column title="机台" align="left" fixed="left" field="machineCode" :width="120"></vxe-column>
					<vxe-column title="锭序" align="center" fixed="left" field="prdNoticeMachineFinishId" :width="80"></vxe-column>
					<!--<vxe-column title="锭组" align="left" field="endSpinNumber" :width="120">
						<template slot-scope="scope">
							<span>{{ `${scope.row.startSpinNumber}~${scope.row.endSpinNumber}` }}</span>
						</template>
					</vxe-column>-->
					<vxe-column title="品种" align="left" field="productName" :min-width="200"></vxe-column>
					<vxe-column title="批号" align="left" field="batchCode" :min-width="130"></vxe-column>
					<!--<vxe-column title="开始产量表数" align="right" field="startOutput" :min-width="140">
						<template slot-scope="scope">
							<span v-if="pageType === 'detail'">{{ scope.row.startOutput }}</span>
							<jk-number-input v-else v-model="scope.row.startOutput" size="mini" @change="onStartOutput($event, scope)"></jk-number-input>
						</template>
					</vxe-column>
					<vxe-column title="结束产量表数" align="right" field="endOutput" :min-width="140">
						<template slot-scope="scope">
							<span v-if="pageType === 'detail'">{{ scope.row.endOutput }}</span>
							<jk-number-input v-else v-model="scope.row.endOutput" size="mini" @change="onEndOutput($event, scope)"></jk-number-input>
						</template>
					</vxe-column>-->

					<vxe-column title="系数" align="right" field="outputRatio" :width="130">
						<template slot-scope="scope">
							<span v-if="pageType === 'detail'">{{ scope.row.outputRatio }}</span>
							<jk-number-input v-else v-model="scope.row.outputRatio" size="mini" @change="onOutputRatio($event, scope)"></jk-number-input>
						</template>
					</vxe-column>
					<vxe-column title="当班产量(kg)" align="right" field="shiftQty" :width="160">
						<template slot-scope="scope">
							<span v-if="pageType === 'detail'">{{ scope.row.shiftQty }}</span>
							<jk-number-input v-else v-model="scope.row.shiftQty" size="mini"></jk-number-input>
						</template>
					</vxe-column>
				</jk-table>
			</el-form>
		</jk-card>
	</div>
</template>

<script>
    import formMixin from './form-mixin';
    export default {
        mixins: [formMixin],
        data() {
            return {
            };
        },
        methods: {
        },
        mounted() {
            this.getDependentData();
        }
    };
</script>

